<template>
	<view>
		<u-navbar :is-back='false' :border-bottom='false'>
			<view class="searchBox">
				<u-search placeholder="搜一搜" :show-action="false" v-model="keyword" @search="searchFn"></u-search>
			</view>
			<view slot='right' class="cancel" @click="back">
				取消
			</view>
		</u-navbar>
		<view class="history">
			<view class="label">
				<view class="left">
					搜索历史
				</view>
				<view class="right" @click="showModel=true">
					<u-icon name="trash" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="history-ul">
				<view class="history-li" v-for="(word,index) in oldWordList" :key='index' @click="tosearchRes(word)">
					{{word}}
				</view>
			</view>
		</view>
		<u-modal v-model="showModel" :show-title='false' show-cancel-button :content="content" @confirm='confirmFn'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModel:false,
				content:'确认删除全部历史记录',
				keyword: '',
				oldWordList: []
			}
		},
		onShow() {
			let history = uni.getStorageSync('history')
			this.keyword = ''
			if (history) {
				let list = [...new Set(history)]
				this.oldWordList = list
				
			} else {
				this.oldWordList = []
			}
		},
		methods: {
			tosearchRes(val){
				uni.navigateTo({
					url:'./searchRes?keyword='+val
				})
			},
			// 删除历史记录
			confirmFn(){
				this.oldWordList =[]
				uni.removeStorage({
					key:'history'
				})
			},
			// 搜索
			searchFn() {
				let that =this
				if (this.keyword) {
					this.oldWordList.push(this.keyword)
					if(this.oldWordList.length>10){
						return
					}
				}
				uni.setStorage({
					key: 'history',
					data: this.oldWordList,
					success() {
						uni.navigateTo({
							url: './searchRes?keyword='+that.keyword
						})
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.searchBox {
		width: 313px;
		height: 32px;
		background: #F2F2F7;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.cancel {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		padding-right: 32rpx;
	}

	.history {
		.label {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;

			.left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}
		}

		.history-ul {
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx;

			.history-li {
				width: fit-content;
				height: 56rpx;
				background: #F2F2F7;
				border-radius: 4rpx;
				line-height: 56rpx;
				text-align: center;
				padding: 0 22rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
